<template>
  <div>
    <div class="goods-name" v-if="props.name">
      <div>B1-4042带腿带袖体雕衣 <button>兑换商品</button></div>
      <div>B1-4042带腿带袖体雕衣</div>
    </div>
    <button class="in-stock" v-if="props.stockIn" @click="handleStockIn">
      {{ props.stockIn }}
    </button>
    <button class="look-goods-details" v-if="props.details" @click="handleDetails">
      {{ props.details }}
    </button>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  props: ['name', 'stockIn', 'details']
}
</script>
<script setup>
const props = defineProps();
const emits = defineEmits(['handleStockIn','handleDetails']);
const handleStockIn = (e) => {
  emits('handleStockIn');
}
const handleDetails = (e) => {
  emits('handleDetails')
}

</script>
<style lang="less" scoped>
.goods-name {
  >div:first-child {
    display: flex;
    align-items: center;
    font-size: 24px;
    color: #2E323D;

    >button {
      margin-left: 18px;
      width: 88px;
      height: 28px;
      font-size: 18px;
      background: #FFFFFF;
      border: 1px solid #AAAAAA;
      border-radius: 2px;
      line-height: 18px;
      text-align: center;
    }
  }

  >div:last-child {
    font-size: 20px;
    color: #4A5060;
  }
}

.look-goods-details,
.in-stock {
  width: 128px;
  height: 44px;
  font-size: 24px;
  color: #1981F4;
  line-height: 44px;
  background: #EBF4FF;
  border: 1px solid #2C8CF0;
  border-radius: 5px;
  line-height: 44px;
}

.in-stock {
  margin-right: 20px;
  color: #FE9900;
  background: #FCF4E8;
  border: 1px solid #FE9900;
}
</style>